import React, { Component } from 'react';
import {
    Modal,
    Dimensions,
    View,
    Text,
    ScrollView,
    TouchableOpacity,
    Image,
    StyleSheet,
    ActivityIndicator,
    Alert,
    Platform
} from 'react-native';
import {ImageViewer} from 'iftide';


// iPhoneX,iPhoneXS
const X_WIDTH = 375;
const X_HEIGHT = 812;

//iPhoneXR,iPhoneXS Max
const Max_WIDTH = 414;
const Max_HEIGHT = 896;

// screen
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;

function isIphoneX() {
    return (
        Platform.OS === 'ios' &&
        (((SCREEN_HEIGHT === X_HEIGHT && SCREEN_WIDTH === X_WIDTH) ||
            (SCREEN_HEIGHT === X_WIDTH && SCREEN_WIDTH === X_HEIGHT)) ||
            ((SCREEN_HEIGHT === Max_HEIGHT && SCREEN_WIDTH === Max_WIDTH) ||
                (SCREEN_HEIGHT === Max_WIDTH && SCREEN_WIDTH === Max_HEIGHT)))
    );
}

const images =  [
    {
        url: "https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=1220656001,756766299&fm=27&gp=0.jpg",
        fileName: "身份证"

    },{
        url: "https://avatars2.githubusercontent.com/u/7970947?v=3&s=460",
        fileName: "身份证"
    },{
        fileName: "身份证",
        url: "https://s3.amazonaws.com/uifaces/faces/twitter/ladylexy/128.jpg"
    }]

let imgsDesc = [
    "北京市海淀区牡丹园地铁站",
    "测试footer",
    "测试footer"
];
export default class Basic extends Component{
    constructor(props){
        super(props);
        this.state = {
            isImageShow: false,
            imageArray: images,
            imageIndex: 0
        };
    }
    _renderImage(item, index) {
        let url = item.url;
        let source = {uri: url};
        return (
            <View style={{alignItems: 'center', marginTop: 5}} key={'image' + index}>
                <TouchableOpacity onPress={this._openMax.bind(this, source, index)}>
                    <Image source={source}
                           style={styles.img}/>
                </TouchableOpacity>
            </View>
        );
    }
    _openMax(source, index) {
        this.setState({
            isImageShow: true,
            imageIndex: index,
        });
    }

    render() {
        let containerStyle = isIphoneX() ? {marginTop:40,marginBottom:34} : {};
        return (
            <View style={containerStyle}>
                <ScrollView>
                    {
                        this.state.imageArray.map((item, index)=> {

                            return this._renderImage(item, index);
                        })
                    }
                    {this.state.isImageShow ?
                        <Modal visible={true} transparent={true}
                               onRequestClose={()=> {
                                   this.setState({
                                       isImageShow: false,
                                   });
                               }}>
                            <ImageViewer imageUrls={this.state.imageArray}
                                         onCancel={()=> {
                                             this.setState({
                                                 isImageShow: false,
                                             });
                                         }}
                                         renderFooter={(currentIndex) => {
                                             return (
                                                 <ScrollView style={{ height: 44 }}>
                                                     <Text style={styles.textStyle}>2018-4-28</Text>
                                                     <Text style={styles.textStyle}>{imgsDesc[currentIndex]}</Text>
                                                 </ScrollView>
                                             );
                                         }}
                                         failImageSource={{
                                             url: 'https://avatars2.githubusercontent.com/u/7970947?v=3&s=460',
                                             width: Dimensions.get('window').width,
                                             height: Dimensions.get('window').height,
                                         }}
                                         loadingRender={()=>{
                                             return (
                                                 <ActivityIndicator
                                                     animating={true}
                                                     style={{justifyContent: 'center',alignItems: 'center',position:'absolute',top:isIphoneX()?40:0}}
                                                     size={'large'}
                                                     color="#3D95D6"/>
                                             )
                                         }}
                                         index={this.state.imageIndex}
                                         saveToLocalByLongPress = {false}
                                         onLongPress={()=>{console.log('长按回调')}}
                                         onSave={(url)=>{Alert.alert(
                                             '提示',
                                             url,
                                             [{text: 'OK', onPress: () => {}}],
                                             { cancelable: false }
                                         )}}
                            />
                        </Modal>
                        : null}
                </ScrollView>
            </View>
        )
    }
}

const styles = StyleSheet.create({
    img:{
        width: Dimensions.get("window").width - 30,
        height: 240
    },
    textStyle: {
        color: '#fff',
        fontSize:16,
        paddingLeft: 20,
        paddingRight: 10
    }
})